<template>
    <div class="banner" v-on:mouseover="stop()" v-on:mouseout="move()">
        <transition-group name="lunbo" >
            <img v-for="(item, index) in imgData" :key="index" :src="item" v-show="cur===index"/>
        </transition-group>
        <div class="banner-circle">
            <ul class="carouselNumber">
                <li v-for="(item, index) in imgData" :key="index" :class="{'active':index==cur}">{{index}}</li>
            </ul>
        </div>
    </div>
     
</template>

<script>
import { reactive, toRefs, inject, onMounted } from 'vue'

export default {
    setup () {
        const state = reactive({
            imgData: inject('imgData'),
            cur: 0,// 初始化值
            timer: null
        })
        const autoplay = () => {
            state.cur++
            state.cur = state.cur % state.imgData.length
        }
        const play = () => {
            state.timer = setInterval(autoplay, 2000)
        }
        const stop = () => {
            clearInterval(state.timer)
        }
        const move = () => {
            play()
        }
        onMounted(() => {
            play()
        })
        
        return {
            ...toRefs(state),
            play,
            stop,
            move
        }
    }
}
</script>

<style scoped>

.carouselNumber{
    list-style: none;
    display: flex;
    position: absolute;
    left: 300px;
    top: 300px;
}
.carouselNumber li{
    margin-left: 10px;
    height: 20px;
    width: 20px;
    background-color: white;
    color:salmon;
    border: 1px solid salmon;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
}
.carouselNumber li.active{
    color: white;
    background-color: salmon;
}

.lunbo-enter-active{
    animation: flip1 0.6s linear;
}
.lunbo-leave-active{
    animation: flip2 0.5s linear;
}

@keyframes flip1{
    0% {
        transform: scale(350px);
        opacity: 0;
    }
    50% {
        transform: translateX(175px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(px);
        opacity: 1;
    }
}
@keyframes flip2{
    0% {
        transform: scale(0px);
        opacity: 1;
    }
    50% {
        transform: translateX(-325px);
        opacity: 0.5;
    }
    100% {
        transform: translateX(-650px);
        opacity: 0;
    }
}

@import url(../../../assets/animate.min.css);
</style>